<template>
	<div ref="currentScheduleShiftProcessEmpNum" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>

    import * as echarts from 'echarts';
    import { color, borderColor, legendTextStyle } from './chart-conf';
    import homeMixin from '../../../../../mixins/dom-resize';
    import {
        workforceManagementScheduleEmpGetDataByProcess
    } from '../../../../../api/production/kanBan';
    export default {
        name: 'CurrentScheduleShiftProcessEmpNum',
        props: {
            homeData: {
                type: Object,
                default() {
                    return {};
                }
            },
            refreshData: {
                type: [Number, String],
                default: ''
            },
            workshopId: {
                type: Number,
                default: null
            },
            processCode: {
                type: String,
                default: 'XS'
            }
        },
        mixins: [homeMixin],
        data() {
            return {
                chartData: [],
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '挡车工',
                        subtext: '',
                        left: 'center',
                        textStyle: {
                            color: color,
                            fontSize: '16px'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c}人'
                    },
                    legend: {
                        bottom: 'bottom',
                        textStyle: {
                            color: color
                        }
                    },
                    grid: {
                        top: '54px',
                        right: '20px',
                        bottom: '10px',
                        left: '20px',
                        containLabel: true
                    },
                    series: [
                        {
                            name: '挡车工',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '50%'],
                            label: {
                                show: true,
                                position: 'outside',
                                borderType: 'none',
                                formatter: '{b}-{c}',
                                color: '#808695',
                                textBorderColor: 'none'
                            },
                            data: []
                        }
                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.currentScheduleShiftProcessEmpNum);
                    this.example.setOption(this.option);
                });
            },
            updateChart() {
                if (this.example) {
                    this.$nextTick(() => {
                        this.option.series[0].data = this.chartData ? this.chartData.map((x, index) => {
                            return {
                                name: x.processName,
                                value: x.empNum
                            };
                        }) : []; // 人数
                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            },
            getDataRequest() {
                if (!this.workshopId) return false;
                return workforceManagementScheduleEmpGetDataByProcess().then(res => {
                    if (res.data.status === 200) {
                        this.chartData = res.data.res ? res.data.res : [];
                        this.updateChart();
                    }
                });
            }
        },
        watch: {
            refreshData: {
                handler() {
                    this.getDataRequest();
                },
                deep: true,
                immediate: true
            }
        },
        mounted() {
            this.resize();
            this.initChart();
        },
        destroyed() {
        }
    };
</script>

<style scoped lang="scss"></style>
